<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
	<title>jQuery</title>
	<style type="text/css">
         
 
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script type="text/javascript">
       $(function  () {
       	 // $("#box").append(11111)
       	 // $(".cl").css("color","red")
         // // $("div p").css("color","gold")
         // $("#d1 > p").css("color","red")
         // $("#d1").css("color","red")
         // $("label + input").css("width","500px")
         // $("p ~ label").css("color","gold")
         // $("li:first").css("color","blue")
         // $("li:not(#d3)").css("color","red")
         // $("li:even").css("color","blue")
         // $("li:odd").css("color","pink")
         // // $("li:eq(5)").css("color","gold")
         // // $("li:gt(0)").css("height","100px")	
         // $("li:last").css("background","red")
         // $("li:lt(2)").css("background","red")
         // $(":header").css("color","purple")
         // $("#d4").click(function(){
         //          $("#d4").animate({width:"500px"}) 
         //          })
         // $("div:contains('john')").css("color","red")
         // var s= $("td:empty")
         // $("ul:has(li)").addClass('text')
         // $("td:parent").css("color","gold")
         // $("td:visible")
         // $("div[id]").css("color","red")
         // $("input[name='held']").css("height","100px")
         // $("input[name!='held']").css("height","50px")
         // $("input[name^='held']").css("height","50px")
         // $("input[name$='a']").css("height","100px")
         // $("input[name*=man]").css("height","100px")
         // $("ul li:nth-child(3)").css("color","blue")
         // $("ul li:nth-last-child(1)").css("color","blue")
         // $("ul li:nth-last-of-type(2)").css("color","blue")
         // $("ul").append("<li>44444</li>")
         // $("<li>44444</li>").appendTo("ul")
         // $("ul").prepend("<li>44444</li>")
         // $("<li>44444</li>").prependTo("ul")
         // $("ul").after("<li>5555</li>")
          // $("ul").before("<li>5555</li>")
          // $("#d1").insertAfter("#d3")
          // $("#d3").insertBefore("#d1")
          // $("ul").wrap("<div id='dd'></div>")
          // $("ul").unwrap()
             // $("li").wrapAll("<div id='dd'></div>")
             // $("li").wrap("<div id='dd'></div>")
             // $("p").wrapInner("<b></b>")
             // $("p").wrapInner(document.createElement("b"))
             // $("li").replaceWith("<p></p>")
              // $("<p></p>").replaceAll("li")
              // $("ul").empty()
              // $("ul").remove()
               // $("ul").detach()
               // $("ul").clone().appendTo("ul")
               $("#d3").click(function(){
                     $("p").show(2000)
               })
               $("#d2").click(function(){
                     $("p").hide(2000)
               })
               $("#d1").click(function(){
                     $("p").slideDown(2000)
               })
               $("#d4").click(function(){
                     $("p").slideUp(2000)
               })
               $("#d5").click(function(){
                // if( $!("p").is(":animated")){
                //      $("p").slideToggle()}
                     
                $("p").stop().slideToggle(2000) 
               
               })
               $("#d6").click(function(){
                     $("p").fadeIn("slow")
               })
                $("#d7").click(function(){
                     $("p").fadeOut("slow")
               })
                $("#d8").click(function(){
                     $("p").fadeTo("slow",0.5)
               })
                $("#d9").click(function(){
                     $("p").fadeToggle("slow")
               })

      })
         

         // $(":root").css("background","red")

	</script>
</head>
<body>
  <!--   <ul>
    	<li id="d1">ssss</li>
    	<li id="d3">dddd</li>
    	<li>ffff</li>
    	<li>gggg</li>
    	<li>hhhh</li>
    	<li>wwww</li>
    	<li>gsdgs</li>
    </ul>
    <P>你好你好你好你好</P>
    -->
    <input type="button" value="显示" id="d3"><input type="button" value="隐藏" id="d2">
    <input type="button" value="向下增大" id="d1"><input type="button" value="向上减小" id="d4">
    <input type="button" value="可见性" id="d5"><input type="button" value="淡入" id="d6">
    <input type="button" value="淡出" id="d7"><input type="button" value="透明度" id="d8">
    <input type="button" value="淡入淡出切换" id="d9">
     <p style="display:none">这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。</p>
    </div>
</body>
</html>